import "taro-ui/dist/style/components/button.scss" // 按需引入
import { View, Text, Image, Swiper, SwiperItem, Textarea } from '@tarojs/components'
import './assessBill.less'
import { AtButton, AtImagePicker, AtRate } from 'taro-ui'
import React, { useEffect, useState } from 'react'
import "taro-ui/dist/style/components/rate.scss";
import "taro-ui/dist/style/components/tabs.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/image-picker.scss";

function AssessBill() {
    // 星星的个数
    const [value, setValue] = useState(3);
    // 星星评判的字
    const [word, setWord] = useState('一般')
    const handleChange = (value) => {
        setValue(value);
        console.log(value);
        switch (value){
            case 1:
                setWord('非常差');
                break;
            case 2:
                setWord('差');
                break;
            case 3:
                setWord('一般');
                break;
            case 4:
                setWord('满意');
                break;
            case 5:
                setWord('非常满意');
                break;
        }
        return value
    }
    
    

    // 点击实现切换效果
    // 1
    const [current, setCurrent] = useState(0);
    function activeCss1() {
        setCurrent(1);
    }
    function activeCss2() {
        setCurrent(2);
    }
    // 2
    const [current2, setCurrent2] = useState(0);
    function activeCss1_2() {
        setCurrent2(1);
    }
    function activeCss2_2() {
        setCurrent2(2);
    }
    // 3
    const [current3, setCurrent3] = useState(0);
    function activeCss1_3() {
        setCurrent3(1);
    }
    function activeCss2_3() {
        setCurrent3(2);
    }
    // 4
    const [current4, setCurrent4] = useState(0);
    function activeCss1_4() {
        setCurrent4(1);
    }
    function activeCss2_4() {
        setCurrent4(2);
    }

    // 轮播下面的圆点
    const [dotIndex, setDotIndex] = useState(0);
    function changeDot(e) {
        setDotIndex(e.detail.current)
        // console.log();
    }

    // 上传图片
    const state = {
        files: [
        // {
        //   url: 'https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg',
        // }
        ]
    }
    const [files, setFiles] = useState([]);
    const onChange =(files) =>{
        setFiles(files)
    }
    const onFail = (mes)=>{
      console.log(mes)
    }
    const onImageClick = (index, file)=>{
      console.log(index, file)
    }

    return <View className="assessBillBox">
        <Text>您对本次服务满意吗？</Text>
        {/* 服务名称 */}
        <View className="billInfo">
            <View className="tabNav1_1">
                <View className="tabNav1Img">
                    <Image style={{ width: '50px', height: '50px' }} src='https://img2.baidu.com/it/u=3968920317,2966327604&fm=224&fmt=auto&gp=0.jpg'></Image>
                </View>
                <View className="tabNav1Con">
                    <Text className="tabNav1Con1">助医服务</Text>
                    <View className="tabNav1Con2">
                        <Text>￥</Text>
                        <Text>38</Text>
                    </View>
                </View>
            </View>
        </View>
        {/* 总体评价 */}
        <View className="billAssess">
            <Text>“{word}”</Text>
            <View>
                <AtRate size='20' margin="25" value={value} onChange={handleChange} />
            </View>
        </View>
        {/* 轮播评价 */}
        <View className="lunBoAssess">
            {/* 轮播图 */}
            <Swiper
                className='test-h'
                indicatorColor='#999'
                indicatorActiveColor='#333'
                circular
                onChange={changeDot}
            >
                <SwiperItem>
                    <View className='demo-text-1'>
                        <Text>请问本次服务时长是多少？</Text>
                        <View>
                            {/* <Radio value='选中' checked>选中</Radio>
                            <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio> */}
                            <View onClick={activeCss1} className={current == 1 ? 'active' : ''}>小于1小时</View>
                            <View onClick={activeCss2} className={current == 2 ? 'active' : ''}>大于1小时</View>
                        </View>
                    </View>
                </SwiperItem>
                <SwiperItem>
                    <View className='demo-text-1'>
                        <Text>请问对陪护员是否满意？</Text>
                        <View>
                            {/* <Radio value='选中' checked>选中</Radio>
                            <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio> */}
                            <View onClick={activeCss1_2} className={current2 == 1 ? 'active' : ''}>满意</View>
                            <View onClick={activeCss2_2} className={current2 == 2 ? 'active' : ''}>不满意</View>
                        </View>
                    </View>
                </SwiperItem>
                <SwiperItem>
                    <View className='demo-text-1'>
                        <Text>请问对助医服务是否满意？</Text>
                        <View>
                            {/* <Radio value='选中' checked>选中</Radio>
                            <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio> */}
                            <View onClick={activeCss1_3} className={current3 == 1 ? 'active' : ''}>满意</View>
                            <View onClick={activeCss2_3} className={current3 == 2 ? 'active' : ''}>不满意</View>
                        </View>
                    </View>
                </SwiperItem>
                <SwiperItem>
                    <View className='demo-text-1'>
                        <Text>请问对平台是否满意？</Text>
                        <View>
                            {/* <Radio value='选中' checked>选中</Radio>
                            <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio> */}
                            <View onClick={activeCss1_4} className={current4 == 1 ? 'active' : ''}>满意</View>
                            <View onClick={activeCss2_4} className={current4 == 2 ? 'active' : ''}>不满意</View>
                        </View>
                    </View>
                </SwiperItem>
            </Swiper>
            {/* 轮播下面的圆点 */}
            <View className="dotCss">
                <Text className={dotIndex == 0 ? 'active' : ''}></Text>
                <Text className={dotIndex == 1 ? 'active' : ''}></Text>
                <Text className={dotIndex == 2 ? 'active' : ''}></Text>
                <Text className={dotIndex == 3 ? 'active' : ''}></Text>
            </View>
        </View>
        {/* 评价内容 */}
        <View className="assessCon">
            <Textarea style='background:#fff;width:100%;min-height:100px;' placeholder="请输入评价内容..." autoHeight />
        </View>
        {/* 上传图片视频 */}
        <View className="uploadImgBox">
            <View className="imgPickerBox">
                <AtImagePicker
                length={3}
                files={files}
                onChange={onChange}
                onFail={onFail}
                onImageClick={onImageClick}
                style={{width:'200px',height:'200px'}}
            />
            </View>
            
        </View>

        {/* 确定按钮 */}
        <View className="severBtn">
            <AtButton type='primary' circle full>提交</AtButton>
        </View>
    </View>
}

export default AssessBill;